F2E合作社｜製作輪播幻燈片｜Bootstrap 5網頁框架開發入門

#f2e #F2E合作社 #bootstrap5 #網頁框架開發 #carousel #輪播幻燈片

Posted by itiswonderfall on 2021-11-21

前言

輪播幻燈片是一個循環滾動的套件，可以使用文本、圖片水平不間斷滾動，就像旋轉木馬一樣，常常出現在網站的首頁，不管播放形象圖還是行銷圖片都很常見。

（ 圖片來源 ）

 

 

官方網站的 Carousel 頁面

輪播是循環顯示一系列內容的幻燈片，由 CSS 的 3D transform 以及一些 JavaScript 建構而成，它適用於一系列圖片、文本或自定義的標記，並包括對上一個、下一個控制項和指示器的支援。

 

僅有幻燈片

只有幻燈片的輪播。 輪播圖上有 .d-block 和 .w-100 ，以避免瀏覽器預設的圖像對齊。

HTML

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://picsum.photos/1200/600?ramdom=10" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=11" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=12" class="d-block w-100" alt="">
        </div>
    </div>
</div>

 

 

包含控制項

加入上一個與下一個控制項時，我們建議使用 <button> 元素，當然也可以使用 <a> 來當作 button 使用，記得要替 <a> 元素加上 role="button" 。

HTML

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://picsum.photos/1200/600?ramdom=10" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=11" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=12" class="d-block w-100" alt="">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

 

 

包含指示器

也可以將指示器與控制項一起添加到輪播中。

HTML

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://picsum.photos/1200/600?ramdom=10" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=11" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=12" class="d-block w-100" alt="">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

 

 

包含字幕

在任意 .carousel-item 中使用 .carousel-caption 替幻燈片添加字幕。

HTML

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://picsum.photos/1200/600?ramdom=10" class="d-block w-100" alt="">
            <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Some representative placeholder content for the first slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=11" class="d-block w-100" alt="">
            <div class="carousel-caption d-none d-md-block">
                <h5>Second slide label</h5>
                <p>Some representative placeholder content for the second slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=12" class="d-block w-100" alt="">
            <div class="carousel-caption d-none d-md-block">
                <h5>Third slide label</h5>
                <p>Some representative placeholder content for the third slide.</p>
            </div>
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

 

 

淡入淡出

將 .carousel-fade 加到輪播中，以使用淡入淡出的取代滑動的動畫效果。

HTML

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://picsum.photos/1200/600?ramdom=10" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=11" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=12" class="d-block w-100" alt="">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

 

 

設置時間間隔

在 .carousel-item 上添加 data-bs-interval="" 以更改自動循環至下一個項目的延遲時間，一秒 = 1000 。

HTML

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active" data-bs-interval="10000">
            <img src="https://picsum.photos/1200/600?ramdom=10" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item" data-bs-interval="2000">
            <img src="https://picsum.photos/1200/600?ramdom=11" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=12" class="d-block w-100" alt="">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

 

 

禁用觸摸滑動

輪播支持在觸摸屏設備上向左、向右滑動以在幻燈片之間移動。這可以使用 data-bs-touch 屬性禁用。

HTML

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://picsum.photos/1200/600?ramdom=10" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=11" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=12" class="d-block w-100" alt="">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

 

 

暗色系變化

在 .carousel 上添加 .carousel-dark 附加選項暗色系的控制、選項及字幕。控制項已通過 CSS 屬性添加屬性 filter 從它們默認的白色填充。字幕與提供自定義 color 及額外控制選項 background-color 。

HTML

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active" data-bs-interval="10000">
            <img src="https://picsum.photos/1200/600?ramdom=10" class="d-block w-100" alt="">
            <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Some representative placeholder content for the first slide.</p>
            </div>
        </div>
        <div class="carousel-item" data-bs-interval="2000">
            <img src="https://picsum.photos/1200/600?ramdom=11" class="d-block w-100" alt="">
            <div class="carousel-caption d-none d-md-block">
                <h5>Second slide label</h5>
                <p>Some representative placeholder content for the second slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://picsum.photos/1200/600?ramdom=12" class="d-block w-100" alt="">
            <div class="carousel-caption d-none d-md-block">
                <h5>Third slide label</h5>
                <p>Some representative placeholder content for the third slide.</p>
            </div>
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

 

 

參考資料

  1. Carousel · Bootstrap v5.0
  2. 輪播 (Carousel) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0
  3. 幻燈片製作無困難-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學

#f2e #F2E合作社 #bootstrap5 #網頁框架開發 #carousel #輪播幻燈片

itiswonderfall
前端工程師
瑪莉．羅賓遜說：「每個人都可以從今天開始，創造一個全新的結局。」




Related Posts

JS30 Day 29 筆記

JS30 Day 29 筆記

 GL
27. Comparison of Design Patterns

27. Comparison of Design Patterns

 WayneCheng
【THM Walkthrough】Lateral Movement and Pivoting (2)

【THM Walkthrough】Lateral Movement and Pivoting (2)

 KexconT

Comments